<template>
  <div class="order-taking">
    <div class="content">
      <div class="c-left">
        <p>是否开店</p>
        <p class="color-aaa">开启后，系统将自动匹配订单</p>
      </div>
      <div class="c-right">
        <div class="swich">
          <input type="checkbox" value="" name=""  :checked="isChecked"/>
          <div class="box">
            <span></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import global from '../public/global.vue'
  export default {
    name: 'orderTaking',
    data() {
      return {
        isChecked:false,
        imageUrl:"",
      }
    },
    methods:{},
    mounted () {
      document.title="是否接单";
      let self=this;
      let box = document.querySelector('.swich')
      let checkbox = box.querySelector("input");
      checkbox.checked=true;
      box.classList.add('swich-on');
      box.onclick = function(){
        this.classList.toggle("swich-on");
        checkbox.checked=!checkbox.checked;
        let isOpen=2;
        if(checkbox.checked){
          isOpen=1;
        }
        self.$http.get(url + '/user/setIsOpen?isOpen='+isOpen).then(res => {
          if(res.data.code==0){
            if(self.imageUrl==null||self.imageUrl==""){
              if(isOpen==1){
                alert("请及时上传您的个人照片");
              }

            }
          }else{
            alert(res.data.msg)
          }

        })
      }

      //获取
      let url = global.apiUrl;

      this.$http.get(url + '/user/getUserInfo').then(res => {
        let isOpen=res.data.data.userInfo.isOpen;
        this.imageUrl=res.data.data.realInfo.imageUrl;
        if(isOpen==1){
          checkbox.checked=true;
          box.classList.add("swich-on");
        }else{
          checkbox.checked=false;
          box.classList.remove("swich-on");
        }

      })
    },
    created:function () {

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  .order-taking {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    background: #f3f3f3;
    .content{
      width:100%;
      margin-top:5%;
      padding:0 2.5%;
      background: #fff;
      display: flex;
      justify-content: space-between;
      .c-left{
        font-size: 0.9rem;
        line-height: 2rem;
        .color-aaa{
          font-size: 0.85rem;
          color:#aaa;
        }
      }
      .c-right{
        .swich{margin-top:14px;}
        .swich .box{width:60px;height:30px;background:#ccc;border-radius:20px;transition: all .5s ease;}
        .swich input{display:none;}
        .swich .box span{display:inline-block;height:30px;width:30px;border-radius:15px;background:#fff;transform:translateX(0px);transition: all .5s ease;}
        .swich-on .box{background:#3DD442;transition: all .5s ease;}
        .swich-on .box span{transform:translateX(30px);transition: all .5s ease;}
      }
    }
  }
</style>
